<template>
  <el-form
    ref="form"
    :rules="rules"
    :model="$store.state.config.alert"
    label-position="top"
    @submit.native.prevent>
    <el-row class="m-s-sm">
      <el-col :span="aggregationSchedule ? 24 : 12">
        <ConfigAggregation ref="aggregation" :view-only="viewOnly" />
      </el-col>
      <el-col v-if="!aggregationSchedule" :span="12">
        <el-form-item :class="{'view-only': viewOnly }" label="Re-alert">
          <ElastalertTimeView v-if="viewOnly" :time="realert" />
          <ElastalertTimePicker
            v-else-if="realert"
            id="realert"
            :allow-zero="true"
            :unit="Object.keys(realert)[0]"
            :amount="Object.values(realert)[0]"
            @input="updateRealert" />
          <label v-if="Object.values(realert)[0] === 0">
            WARNING: When re-alert is set to 0 minutes, you will receive an alert
            every single time this rule triggers. <strong>This may result in large bursts
              of notifications.</strong>
          </label>
          <label v-else>
            You will receive, at most, one alert every
            {{ realert.minutes }} minute(s), even if a rule
            triggers multiple times within that timeframe.
            This is a mechanism to prevent getting flooded with alerts.
            If the rule is grouped over a field, this option will be applied on a per-group basis.
          </label>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- time_window_change -->
    <el-row class="m-s-sm">
      <el-col :span="19">
        <ConfigTimeWindowFeature ref="timeWindowFeature" :view-only="viewOnly" />
      </el-col>
    </el-row>

    <!-- Limit Excecution -->
    <el-row class="m-s-sm">
      <el-col :span="24">
        <ConfigLimitExcecution ref="limitExcecution" :view-only="viewOnly" />
      </el-col>
    </el-row>

    <!-- KibanaDiscover -->
    <el-row class="m-s-sm">
      <el-col :span="24">
        <ConfigKibanaDiscover ref="kibanaDiscover" :view-only="viewOnly" />
      </el-col>
    </el-row>

    <!-- ScanEntireTimeframe -->
    <el-row class="m-s-sm">
      <el-col :span="24">
        <ConfigScanEntireTimeframe ref="scanEntireTimeframe" :view-only="viewOnly" />
      </el-col>
    </el-row>

    <!-- Owner -->
    <el-row class="m-s-sm">
      <el-col :span="24">
        <ConfigOwner ref="configOwner" :view-only="viewOnly" />
      </el-col>
    </el-row>

    <!-- Priority -->
    <el-row class="m-s-sm">
      <el-col :span="24">
        <ConfigPriority ref="configPriority" :view-only="viewOnly" />
      </el-col>
    </el-row>

    <!-- Description -->
    <el-row class="m-s-sm">
      <el-col :span="24">
        <ConfigDescription ref="configDescription" :view-only="viewOnly" />
      </el-col>
    </el-row>

    <el-form-item
      v-if="!viewOnly"
      :label="`Destination${alert.length > 1 ? 's' : ''}`"
      prop="alert"
      required>
      <el-checkbox-group v-model="alert" :disabled="viewOnly" @change="$emit('validate')">
        <el-checkbox id="destinationSlack" label="slack" border>
          Slack
        </el-checkbox>
        <el-checkbox id="destinationMsTeams" label="ms_teams" border>
          MS Teams
        </el-checkbox>
        <el-checkbox id="destinationEmail" label="email" border>
          Email
        </el-checkbox>
        <el-checkbox id="destinationPost" label="post" border>
          HTTP
        </el-checkbox>
        <el-checkbox id="destinationTelegram" label="telegram" border>
          Telegram
        </el-checkbox>
        <el-checkbox id="destinationJira" label="jira" border>
          Jira
        </el-checkbox>
        <el-checkbox id="destinationGoogleChats" label="googlechat" border>
          Google Chat
        </el-checkbox>
        <el-checkbox id="destinationlineNotify" label="linenotify" border>
          LineNotify
        </el-checkbox>
        <el-checkbox id="destinationMattermost" label="mattermost" border>
          Mattermost
        </el-checkbox>
        <el-checkbox id="destinationCommand" label="command" border>
          Command
        </el-checkbox>
        <el-checkbox id="destinationGitter" label="gitter" border>
          Gitter
        </el-checkbox>
        <el-checkbox id="destinationSns" label="sns" border>
          Amazon SNS
        </el-checkbox>
        <el-checkbox id="destinationSes" label="ses" border>
          Amazon SES
        </el-checkbox>
        <el-checkbox id="destinationZabbix" label="zabbix" border>
          Zabbix
        </el-checkbox>
        <el-checkbox id="destinationTwilio" label="twilio" border>
          Twilio
        </el-checkbox>
        <el-checkbox id="destinationPagerTree" label="pagertree" border>
          PagerTree
        </el-checkbox>
        <el-checkbox id="destinationExotel" label="exotel" border>
          Exotel
        </el-checkbox>
        <el-checkbox id="destinationStomp" label="stomp" border>
          Stomp
        </el-checkbox>
        <el-checkbox id="destinationVictorOps" label="victorops" border>
          VictorOps
        </el-checkbox>
        <el-checkbox id="destinationServiceNow" label="servicenow" border>
          ServiceNow
        </el-checkbox>
        <el-checkbox id="destinationChatwork" label="chatwork" border>
          Chatwork
        </el-checkbox>
        <el-checkbox id="destinationDiscord" label="discord" border>
          Discord
        </el-checkbox>
        <el-checkbox id="destinationHivealerter" label="hivealerter" border>
          TheHive
        </el-checkbox>
        <el-checkbox id="destinationAlerta" label="alerta" border>
          Alerta
        </el-checkbox>
        <el-checkbox id="destinationDatadog" label="datadog" border>
          Datadog
        </el-checkbox>
        <el-checkbox id="destinationRocketChat" label="rocketchat" border>
          Rocket.Chat
        </el-checkbox>
        <el-checkbox id="destinationPagerDuty" label="pagerduty" border>
          PagerDuty
        </el-checkbox>
        <el-checkbox id="destinationTencentSms" label="tencentsms" border>
          TencentSMS
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-tabs v-if="alert.length" v-model="visibleTabPane" class="border-card-plain m-n-sm" type="card">
      <el-tab-pane v-if="alert.includes('slack') || alert.includes('email') || alert.includes('ms_teams') ||
        alert.includes('telegram') || alert.includes('jira') || alert.includes('mattermost') ||
        alert.includes('sns') || alert.includes('ses') || alert.includes('pagertree') || alert.includes('gitter') ||
        alert.includes('googlechat') || alert.includes('chatwork') || alert.includes('discord') ||
        alert.includes('hivealerter') || alert.includes('alerta') || alert.includes('datadog') ||
        alert.includes('rocketchat') || alert.includes('pagerduty') || alert.includes('tencentsms')">
        <template slot="label">
          <icon :icon="['fa', 'bell']" size="1x" /> Alert
        </template>
        <ConfigAlertSubjectBody
          ref="subjectBody"
          :view-only="viewOnly"
          class="m-s-lg" />
      </el-tab-pane>

      <!-- Slack -->
      <el-tab-pane v-if="alert.includes('slack')">
        <template slot="label">
          <icon :icon="['fab', 'slack']" size="1x" /> Slack
        </template>
        <ConfigAlertSlack ref="slack" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Email -->
      <el-tab-pane v-if="alert.includes('email')">
        <span slot="label"><icon icon="envelope" size="1x" /> Email</span>
        <ConfigAlertEmail ref="email" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- HTTP POST -->
      <el-tab-pane v-if="alert.includes('post')" label="HTTP">
        <span slot="label"><icon icon="globe" /> HTTP</span>
        <ConfigAlertHttpPost ref="post" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- MS Teams -->
      <el-tab-pane v-if="alert.includes('ms_teams')">
        <template slot="label">
          <icon :icon="['fab', 'microsoft']" size="1x" /> MS Teams
        </template>
        <ConfigAlertMsTeams ref="ms_teams" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Telegram -->
      <el-tab-pane v-if="alert.includes('telegram')">
        <template slot="label">
          <icon :icon="['fab', 'telegram']" size="1x" /> Telegram
        </template>
        <ConfigAlertTelegram ref="telegram" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Jira -->
      <el-tab-pane v-if="alert.includes('jira')">
        <template slot="label">
          <icon :icon="['fab', 'jira']" size="1x" /> Jira
        </template>
        <ConfigAlertJira ref="jira" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Google Chat -->
      <el-tab-pane v-if="alert.includes('googlechat')">
        <template slot="label">
          Google Chat
        </template>
        <ConfigAlertGoogleChat ref="googlechat" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Line Notify -->
      <el-tab-pane v-if="alert.includes('linenotify')">
        <template slot="label">
          <icon :icon="['fab', 'line']" size="1x" /> Line Notify
        </template>
        <ConfigAlertLineNotify ref="linenotify" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Mattermost -->
      <el-tab-pane v-if="alert.includes('mattermost')">
        <template slot="label">
          Mattermost
        </template>
        <ConfigAlertMattermost ref="mattermost" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Command -->
      <el-tab-pane v-if="alert.includes('command')">
        <template slot="label">
          Command
        </template>
        <ConfigAlertCommand ref="command" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Gitter -->
      <el-tab-pane v-if="alert.includes('gitter')">
        <template slot="label">
          <icon :icon="['fab', 'gitter']" size="1x" /> Gitter
        </template>
        <ConfigAlertGitter ref="gitter" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Amazon SNS -->
      <el-tab-pane v-if="alert.includes('sns')">
        <template slot="label">
          <icon :icon="['fab', 'aws']" size="1x" /> Amazon SNS
        </template>
        <ConfigAlertAmazonSns ref="sns" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Amazon SES -->
      <el-tab-pane v-if="alert.includes('ses')">
        <template slot="label">
          <icon :icon="['fab', 'aws']" size="1x" /> Amazon SES
        </template>
        <ConfigAlertAmazonSes ref="ses" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Zabbix -->
      <el-tab-pane v-if="alert.includes('zabbix')">
        <template slot="label">
          Zabbix
        </template>
        <ConfigAlertZabbix ref="zabbix" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Twilio -->
      <el-tab-pane v-if="alert.includes('twilio')">
        <template slot="label">
          Twilio
        </template>
        <ConfigAlertTwilio ref="twilio" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- PagerTree -->
      <el-tab-pane v-if="alert.includes('pagertree')">
        <template slot="label">
          PagerTree
        </template>
        <ConfigAlertPagerTree ref="pagertree" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Exotel -->
      <el-tab-pane v-if="alert.includes('exotel')">
        <template slot="label">
          Exotel
        </template>
        <ConfigAlertExotel ref="exotel" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Stomp -->
      <el-tab-pane v-if="alert.includes('stomp')">
        <template slot="label">
          Stomp
        </template>
        <ConfigAlertStomp ref="stomp" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- VictorOps -->
      <el-tab-pane v-if="alert.includes('victorops')">
        <template slot="label">
          VictorOps
        </template>
        <ConfigAlertVictorOps ref="victorops" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- ServiceNow -->
      <el-tab-pane v-if="alert.includes('servicenow')">
        <template slot="label">
          ServiceNow
        </template>
        <ConfigAlertServiceNow ref="servicenow" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Chatwork -->
      <el-tab-pane v-if="alert.includes('chatwork')">
        <template slot="label">
          Chatwork
        </template>
        <ConfigAlertChatwork ref="chatwork" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Discord -->
      <el-tab-pane v-if="alert.includes('discord')">
        <template slot="label">
          Discord
        </template>
        <ConfigAlertDiscord ref="discord" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- TheHive -->
      <el-tab-pane v-if="alert.includes('hivealerter')">
        <template slot="label">
          TheHive
        </template>
        <ConfigAlertTheHive ref="hivealerter" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Alerta -->
      <el-tab-pane v-if="alert.includes('alerta')">
        <template slot="label">
          Alerta
        </template>
        <ConfigAlertAlerta ref="alerta" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Datadog -->
      <el-tab-pane v-if="alert.includes('datadog')">
        <template slot="label">
          Datadog
        </template>
        <ConfigAlertDatadog ref="datadog" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Rocket.Chat -->
      <el-tab-pane v-if="alert.includes('rocketchat')">
        <template slot="label">
          <icon :icon="['fab', 'rocketchat']" size="1x" /> Rocket.Chat
        </template>
        <ConfigAlertRocketChat ref="rocketchat" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- PagerDuty -->
      <el-tab-pane v-if="alert.includes('pagerduty')">
        <template slot="label">
          PagerDuty
        </template>
        <ConfigAlertPagerDuty ref="pagerduty" :view-only="viewOnly" />
      </el-tab-pane>

      <!-- Tencent SMS -->
      <el-tab-pane v-if="alert.includes('tencentsms')">
        <template slot="label">
          TencentSMS
        </template>
        <ConfigAlertTencentSms ref="tencentsms" :view-only="viewOnly" />
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
import ConfigAlertSubjectBody from './ConfigAlertSubjectBody';
import ConfigAlertAlerta from './ConfigAlertAlerta';
import ConfigAlertAmazonSes from './ConfigAlertAmazonSes';
import ConfigAlertAmazonSns from './ConfigAlertAmazonSns';
import ConfigAlertChatwork from './ConfigAlertChatwork';
import ConfigAlertCommand from './ConfigAlertCommand';
import ConfigAlertDatadog from './ConfigAlertDatadog';
import ConfigAlertDiscord from './ConfigAlertDiscord';
import ConfigAlertEmail from './ConfigAlertEmail';
import ConfigAlertExotel from './ConfigAlertExotel';
import ConfigAlertGitter from './ConfigAlertGitter';
import ConfigAlertGoogleChat from './ConfigAlertGoogleChat';
import ConfigAlertHttpPost from './ConfigAlertHttpPost';
import ConfigAlertJira from './ConfigAlertJira';
import ConfigAlertLineNotify from './ConfigAlertLineNotify';
import ConfigAlertMattermost from './ConfigAlertMattermost';
import ConfigAlertMsTeams from './ConfigAlertMsTeams';
import ConfigAlertPagerDuty from './ConfigAlertPagerDuty';
import ConfigAlertPagerTree from './ConfigAlertPagerTree';
import ConfigAlertRocketChat from './ConfigAlertRocketChat';
import ConfigAlertServiceNow from './ConfigAlertServiceNow';
import ConfigAlertSlack from './ConfigAlertSlack';
import ConfigAlertStomp from './ConfigAlertStomp';
import ConfigAlertTencentSms from './ConfigAlertTencentSms';
import ConfigAlertTelegram from './ConfigAlertTelegram';
import ConfigAlertTheHive from './ConfigAlertTheHive';
import ConfigAlertTwilio from './ConfigAlertTwilio';
import ConfigAlertVictorOps from './ConfigAlertVictorOps';
import ConfigAlertZabbix from './ConfigAlertZabbix';

export default {
  components: {
    ConfigAlertSubjectBody,
    ConfigAlertAlerta,
    ConfigAlertAmazonSes,
    ConfigAlertAmazonSns,
    ConfigAlertChatwork,
    ConfigAlertCommand,
    ConfigAlertDatadog,
    ConfigAlertDiscord,
    ConfigAlertEmail,
    ConfigAlertExotel,
    ConfigAlertGitter,
    ConfigAlertGoogleChat,
    ConfigAlertHttpPost,
    ConfigAlertJira,
    ConfigAlertLineNotify,
    ConfigAlertMattermost,
    ConfigAlertMsTeams,
    ConfigAlertPagerDuty,
    ConfigAlertPagerTree,
    ConfigAlertRocketChat,
    ConfigAlertServiceNow,
    ConfigAlertSlack,
    ConfigAlertStomp,
    ConfigAlertTencentSms,
    ConfigAlertTelegram,
    ConfigAlertTheHive,
    ConfigAlertTwilio,
    ConfigAlertVictorOps,
    ConfigAlertZabbix
  },

  props: ['viewOnly'],

  data() {
    return {
      visibleTabPane: '',
      rules: {
        alert: [
          {
            required: true,
            message: 'You must choose at least one alert type'
          }
        ]
      }
    };
  },

  computed: {
    aggregationSchedule: {
      get() {
        return this.$store.state.config.alert.aggregationSchedule;
      },
      set(value) {
        this.$store.commit('config/alert/UPDATE_AGGREGATION_SCHEDULE', value);
      }
    },

    realert: {
      get() {
        return this.$store.state.config.alert.realert || { minutes: 5 };
      },
      set(value) {
        this.$store.commit('config/alert/UPDATE_REALERT', value);
      }
    },

    alert: {
      get() {
        return this.$store.state.config.alert.alert;
      },
      set(value) {
        this.$store.commit('config/alert/UPDATE_ALERT', value);
      }
    }
  },

  mounted() {
  },

  methods: {
    async validate() {
      try {
        this.$emit('validate', true);
        return true;
      } catch (error) {
        this.$emit('validate', false);
        return false;
      }
    },

    updateRealert(value) {
      this.realert = {};
      this.$set(this.realert, Object.keys(value)[0], Object.values(value)[0]);
    }
  }
};
</script>

<style lang="scss" scoped>
// If we don't do this, the autocomplete dropdown gets cut off
.el-tabs__content {
  overflow: visible;
}
</style>

<style lang="scss">
.atwho-view {
  max-height: 220px;
  height: 220px;
  margin-bottom: -245px;
}

// Fix issue where clicking on label of dropdown didn't register
.atwho-li span {
  pointer-events: none;
}

.limit-excecution {
  margin: 0 auto;
  min-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>
